<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<title>成程科技集团-集团产品</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="description" content="成程科技集团 成程 成程科技 集团产品">
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<style>
		/* Header and Navigation */
		.index-header {
			position: relative;
			/* Ensure it doesn't overlap with other elements */
			z-index: 10;
			/* Make sure it is above other content */
			border-radius: 0;
			width: 100%;
		}

		.index-logo img {
			max-width: 200px;
			height: auto;
		}

		.navbar-custom {
			background-color: rgba(37, 155, 217, 0.8);
			/* Slight transparency */
			border-radius: 20px;
			padding: 0px 10px;
		}

		.navbar-nav .nav-link {
			color: aliceblue;
			padding: 10px 15px;
		}

		/* .navbar-nav .nav-link.active {
			border-bottom: 2px solid rgba(255, 255, 255, 0.4);
		} */

		@media (max-width: 768px) {
			.index-logo img {
				max-width: 180px;
			}

			.navbar-nav {
				text-align: center;
			}

			.navbar-nav .nav-link {
				display: block;
				padding: 10px;
			}
		}
	</style>
	<link rel="stylesheet" type="text/css" href="css/swiper-4.4.2.min.css" />
	<link rel="stylesheet" type="text/css" href="css/animate.min.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/modernizr.custom.js"></script>
	<script type="text/javascript" src="js/more.js"></script>
	<script type="text/javascript" src="js/swiper-4.4.2.min.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
		let pageNum = 1; // 当前页码
		const pageSize = 999; // 每页大小
		let isLoading = false; // 防止重复加载

		function loadData() {
			if (isLoading) return; // 如果正在加载，避免重复请求
			isLoading = true;
			$('#loading').show(); // 显示加载提示

			// $.get(`${host}/iot/files/list?pageNum=${pageNum}&pageSize=${pageSize}&picsId=8`, (data) => {
			// 	const list = data['rows'];
			// 	let swiphtml = '';
			// 	let numc = 0;
			// 	for (let i = 0; i < list.length; i++) {
			// 		if (list[i].type === '5004') {
			// 			numc++;
			// 			if (numc % 2 === 1) {
			// 				swiphtml +=
			// 					`<div class='g-0 col-12 row prdcbg'><div class='col-1'></div><div class='col-5 d-flex align-items-center justify-content-center prdcleft' style='text-align: center;'>${hostlist[i].name}</div><div class='col-5 d-flex align-items-center justify-content-center prdcright' style='padding: 10px;'><img src='${list[i].url}'></div><div class='col-1'></div></div>`;
			// 			} else {
			// 				swiphtml +=
			// 					`<div class='g-0 row prdcbg'><div class='col-1'></div><div class='col-5 d-flex align-items-center justify-content-center prdcleft' style='padding: 10px;'><img src='${hostlist[i].url}'></div><div class='col-5 d-flex align-items-center justify-content-center prdcright' style='text-align: center;'>${list[i].name}</div><div class='col-1'></div></div>`;
			// 			}
			// 		}
			// 	}
			// 	$('#pr').append(swiphtml); // 将新数据添加到页面中

			// 	if (list.length < pageSize) {
			// 		$(window).off('scroll'); // 如果没有更多数据，移除滚动事件
			// 	}
			// 	pageNum++; // 增加页码
			// 	isLoading = false; // 结束加载状态
			// 	$('#loading').hide(); // 隐藏加载提示
			// });
			$.get(host + '/iot/files/list?pageNum=1&pageSize=999&picsId=8', (data) => {
				var list = data['rows'];
				var numc = 0;

				var swiphtml = '';
				for (let i = 0; i < list.length; i++) {
					if (list[i].type == '5004') {
						numc = numc + 1;
						if (numc % 2 == 1) {
							swiphtml = swiphtml +
								"<div class='g-0 col-12 row prdcbg' style=''><div class='col-1'></div><div class='col-5 d-flex align-items-center justify-content-center prdcleft' style='text-align: center;'>" +
								list[i].name +
								"</div><div class='col-5 d-flex align-items-center  justify-content-center prdcright' style='padding: 10px;'><img src='" +
								host + list[i].url + "'></div><div class='col-1'></div></div>";
						} else {
							swiphtml = swiphtml +
								"<div class='g-0 row prdcbg' style=''><div class='col-1'></div><div class = 'col-5 d-flex align-items-center  justify-content-center prdcleft' style='padding: 10px;'><img src='" +
								host + list[i].url +
								"' ></div><div class = 'col-5 d-flex align-items-center  justify-content-center prdcright'  style='text-align: center;'>" +
								list[i].name + "</div><div class='col-1'></div></div>";
						}
					}
				}
				console.log(swiphtml);
				elempr = document.getElementById("pr");
				elempr.innerHTML = swiphtml;
			});

			$.get(host + '/iot/pics/list?pageNum=1&pageSize=30', (data) => {
				var list = data['rows'];
				var img1, img2, img3;
				var fimg1, fimg2;
				var cimg1, cimg2, cimg3, cimg4, cimg5;
				var cimg6, cimg7, cimg8, cimg9, cimg10;

				for (let i = 0; i < list.length; i++) {
					/* foot **/
					/* foot **/
					if (list[i].type == '103') {
						console.log(list[i]);
						imgArray = list[i].url.split(",");
						felem1 = document.getElementById("fimg1");
						fimg1 = host + imgArray[0];
						felem1.src = fimg1;
						imgArray = list[i].url.split(",");
						felem2 = document.getElementById("fimg2");
						fimg2 = host + imgArray[1];
						felem2.src = fimg2;
						telelem = document.getElementById("tel");
						telelem.innerHTML = list[i].stra;
						addrelem = document.getElementById("addr");
						addrelem.innerHTML = list[i].strb;
						urlelem1 = document.getElementById("outurl1");
						urlArray = list[i].strc.split("#");
						urlelem1.innerHTML = urlArray[0];
						urlelem1.href = urlArray[1];
						urlelem2 = document.getElementById("outurl2");
						urlArray = list[i].strd.split("#");
						urlelem2.innerHTML = urlArray[0];
						urlelem2.href = urlArray[1];
						urlelem3 = document.getElementById("outurl3");
						urlArray = list[i].stre.split("#");
						urlelem3.innerHTML = urlArray[0];
						urlelem3.href = urlArray[1];
						urlelem4 = document.getElementById("outurl0");
						urlArray = list[i].strf.split("#");
						urlelem4.innerHTML = urlArray[0];
						urlelem4.href = urlArray[1];
					}
					/* 二级广告 **/
					if (list[i].type == '201') {
						imgArray = list[i].url.split(",");
						elem1 = document.getElementById("img1");
						img1 = host + imgArray[0];
						elem1.src = img1;
						elem2 = document.getElementById("img2");
						img2 = host + imgArray[1];
						elem2.src = img2;
						elem3 = document.getElementById("img3");
						img3 = host + imgArray[2];
						elem3.src = img3;
					}

				}
			});
		}

		// 初始加载数据
		loadData();

		// 滚动事件监听器
		$(window).on('scroll', () => {
			const footerOffsetTop = $('footer').offset().top;
			const scrollTop = $(window).scrollTop() + $(window).height();

			if (scrollTop + 50 >= footerOffsetTop) { // 在滚动接近footer时加载数据
				loadData();
			}
		});
	</script>

</head>

<body>
	<div class="index-header">
		<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
			<div class="container-fluid d-flex align-items-center">
				<div class="index-logo">
					<a href="index.html"><img src="imgs/logo.png" alt="Logo" /></a>
				</div>
				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
					aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarCollapse">
					<ul class="navbar-nav ms-auto">
						<li class="nav-item"><a href="index.html" class="nav-link">首页</a></li>
						<li class="nav-item"><a href="about.html" class="nav-link">集团简介</a></li>
						<li class="nav-item"><a href="news.html" class="nav-link">集团要闻</a></li>
						<li class="nav-item"><a href="products.html" class="nav-link active">集团产品</a></li>
						<li class="nav-item"><a href="program.html" class="nav-link">项目发展</a></li>
						<li class="nav-item"><a href="science.html" class="nav-link">科研成果</a></li>
						<li class="nav-item"><a href="pharmacy.html" class="nav-link">药效学成果</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>
	<div id="bloc" class="container-fluid g-0">
		<!--big new-->
		<article id="index">
			<div class="banner-position g-0">
				<div class="index-banner swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img id="img1" src="imgs/lowbg.png">
						</div>
						<div class="swiper-slide">
							<img id="img2" src="">
						</div>
						<div class="swiper-slide">
							<img id="img3" src="">
						</div>
					</div>
					<!-- Add Navigation -->
					<div class="swiper-button-prev swiper-button-white"></div>
					<div class="swiper-button-next swiper-button-white"></div>
				</div>
			</div>
			<div class="clear"></div>
			<!--product-->
			<div class="prbg fix fons18" style="padding: 0;">
				<div class="col-sm-5"></div>
				<div class="col-sm-1" style="height: 100px;margin-top: 80px;">
					<h5><a style="color:black" href="products.html">饮液系列</a></h5>
				</div>
				<div class="col-sm-1" style="height: 100px;margin-top: 80px;">
					<h5><a style="color:black" href="products2.html">饮用水系列</a></h5>
				</div>
				<div class="col-sm-1" style="height: 100px;margin-top: 80px;">
					<h5><a style="color:black" href="products3.html">日用品系列</a></h5>
				</div>
				<div class="col-sm-1" style="height: 100px;margin-top: 80px;">
					<h5 style="margin: 0 10px;height: 40px;color:#259bd9;border-bottom: 1px solid #259bd9;">超微粉系列</h5>
				</div>
				<div class="col-sm-1" style="height: 100px;margin-top: 80px;">
					<h5><a style="color:black" href="products5.html">酒系列</a></h5>
				</div>
				<div class="col-sm-1" style="height: 100px;margin-top: 80px;">
					<h5><a style="color:black" href="products6.html">设备系列</a></h5>
				</div>
			</div>
			<div class="clear"></div>
			<div class="g-0 col-sm-12" style="padding: 0;" id="pr">
				<!-- 产品数据将被插入在这里 -->
			</div>
			<div class="clear"></div>
			<div class="g-0 col-sm-12" style="padding: 0;">
				<img src="imgs/products_03.png" class="g-0 col-sm-12">
			</div>
			<div class="clear"></div>
			<!--foot-->
			<footer class="g-0 col-sm-12 fbg row" style="padding: 0;">
				<div class="g-0 col-sm-4"></div>
				<div class="g-0 col-sm-2" style="color: #fff;margin-top: 100px;margin-left: 50px;">
					<p>
						<h5>联系我们</h5>
					</p>
					<p id="tel"></p>
					<p id="addr"></p>
					<p>备案号: <a id="outurl0">黑ICP备2024022673号</a>
					</p>
				</div>
				<div class="g-0 col-sm-2" style="color: #fff;margin-top: 100px;margin-left: 50px;">
					<p>
						<h5>友情链接</h5>
					</p>
					<p><a id="outurl1">碳方会</a></p>
					<p><a id="outurl2">成程碳方中医诊所</a></p>
					<p><a id="outurl3">黑龙江省中医抗癌协会</a></p>
				</div>
				<div class="g-0 col-sm-1 fix ma"><img id="fimg1" src=""></div>
				<div class="g-0 col-sm-1 fix ma" style="margin-top: 100px;margin-bottom: 100px;"><img id="fimg2" src="">
				</div>
				<div class="g-0 col-sm-1 fix ma" style="margin-top: 100px;margin-bottom: 100px;height: 7.5rem;"><img
						src="imgs/ccfwdz.png">
				</div>
				<div class="g-0 col-sm-2"></div>
			</footer>
			<div class="clear"></div>
		</article>
	</div>
	<div class="g-0 col-sm-12" id="loading" style="text-align: center; padding: 10px; display: none;">加载更多...</div>

	<script type="text/javascript">
		var swiper = new Swiper('.index-banner.swiper-container', {
			speed: 600,
			parallax: true,
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
		});
	</script>
</body>

</html>